<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.4, user-scalable=no, minimum-scale=0.5, maximum-scale=2.0"/>
  <title>CodePen - Animated Form Field Label</title>
  <link rel="stylesheet" href="./style.css">
  <script src="echarts.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<h2>最小二322乘法(y=kx+b)</h2>

<p class="row">
  <input type="search" id="inputX" placeholder=" ">
  <label for="inputX">X测量值</label>
</p>
<p class="row">
  <input type="search" id="inputY" placeholder=" ">
  <label for="inputY">Y测量值</label>
  <button type="button" onclick="SubmitData()">
    <svg width="24px" height="24px" viewBox="0 0 180 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Artboard">
                <g id="Group">
                    <circle id="Oval" stroke="#2E3131" stroke-width="15" cx="90" cy="90" r="82.5"></circle>
                    <polygon id="Triangle" fill="#2E3131" transform="translate(98.000000, 90.000000) rotate(90.000000) translate(-98.000000, -90.000000) " points="98 62 140 118 56 118"></polygon>
                </g>
            </g>
        </g>
    </svg>
  </button>
</p>
<!-- partial -->
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<!-- 有Bug-->
<button type="button" onclick="location.reload()">刷新</button>
<button type="button" onclick="RemoveData()">删除某个数据</button>
<div id="main" style="width: 80%;height:400px;"></div>
<script type="text/javascript">
    var ArrayTest = new Array();
    var SubArrayTest = new Array();
    var InputNumber = 0;
    var k = 1, b = 0;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        xAxis: {},
        yAxis: {},
        series: [{
        symbolSize: 10,
        data: ArrayTest,
        type: 'scatter'
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    function RemoveData(){
        var RemoveNum = parseInt(prompt("请输入要删除的数据序号!")) - 1;
        ArrayTest.splice(RemoveNum, 1);
        if (ArrayTest.length >= 2){
            LinearRegression();
        }
        var InputList = "";
        for (var i=0;i<ArrayTest.length;i++){
            InputList += i+1 + "：("+ArrayTest[i]+")" + "<br/>";
        }
        document.getElementById("demo2").innerHTML = InputList;
        InputNumber--;

    }
    function ClearScreen() {
        ArrayTest.splice(0, ArrayTest.length);
        myChart.setOption(option);
        InputList = "";
    }
    function SubmitData() {
        var x, text;

        // 获取 id="numb" 的值
        SubArrayTest[0] = document.getElementById("inputX").value;
        SubArrayTest[1] = document.getElementById("inputY").value;
        // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10
        // document.getElementById("demo1").innerHTML = ArrayTest + " length:" + ArrayTest.length;
        // 做深拷贝
        ArrayTest[InputNumber] = JSON.parse(JSON.stringify(SubArrayTest))
        document.getElementById("demo1").innerHTML = ArrayTest + " length:" + ArrayTest.length;
        InputNumber++;
        var InputList = "";
        for (var i=0;i<ArrayTest.length;i++){
            InputList += i+1 + "：("+ArrayTest[i]+")" + "<br/>";
        }
        myChart.setOption(option);
        document.getElementById("demo2").innerHTML = InputList;
        document.getElementById("inputX").value = "";
        document.getElementById("inputY").value = "";
        if (ArrayTest.length >= 2){
            LinearRegression();
        }

    }

    function LinearRegression(){
        var xsum = 0, ysum = 0, xTimesySum = 0, xSquareSum = 0;
        var xmin = ArrayTest[0][0], xmax = ArrayTest[0][0]
        for (var i=0;i<ArrayTest.length;i++){
            if (ArrayTest[i] == undefined){
                continue;
            }
            var m = parseFloat(ArrayTest[i][0])
            var n = parseFloat(ArrayTest[i][1])
            xsum += m;
            ysum += n;
            xTimesySum += m * n;
            xSquareSum += m * m;
            if (xmin > m){
                xmin = m;
            }
            if (xmax < m){
                xmax = m;
            }
        }
        var xmean = xsum / ArrayTest.length; // 均值
        var ymean = ysum / ArrayTest.length; // 均值
        var num = 0, den = 0;
        num = xTimesySum - xsum * ysum / ArrayTest.length
        den = xSquareSum - xsum * xsum / ArrayTest.length
        k = num / den;
        b = ymean - k * xmean;
        document.getElementById("demo3").innerHTML = 'k = ' + k;
        document.getElementById("demo4").innerHTML = 'b = ' + b;

        option = {
        xAxis: {},
        yAxis: {},
        series: [{
            symbolSize: 20,
            data: ArrayTest,
            type: 'scatter'
        },
        {
            data: [[xmin, k * xmin + b], [xmax, k * xmax + b]],
            type: 'line'
        }]
    };
    myChart.setOption(option);
    }

    </script>
</body>
</html>
